<template>
  <div class="banner" @touchstart="handleBannerClick">
    <img class="banner-img"
         src="http://img1.qunarzz.com/sight/p0/1803/7b/7b4da6d4d236667ca3.img.jpg_350x240_117fb69a.jpg">
    <div class="banner-info">
      <span class="title">济南方特东方神话</span>
      <span class="num">
        <i class="iconfont icon-tupian"></i>
        23
      </span>
    </div>
    <fade>
      <gallery v-show="showGallery" ref="gallery" :swiperList="swiperList" @close="handleGalleryClose"></gallery>
    </fade>
  </div>
</template>

<script type="text/ecmascript-6">
  import Gallery from '@/common/Gallery'
  import Fade from '@/common/Fade'

  export default {
    data () {
      return {
        swiperList: ['http://img1.qunarzz.com/sight/p0/1803/7b/7b4da6d4d236667ca3.img.jpg_350x240_117fb69a.jpg',
          'http://img1.qunarzz.com/sight/p0/1807/6d/6d1cdccc65d7e194a3.img.jpg_350x240_4ba06f5e.jpg'
        ],
        showGallery: false
      }
    },
    methods: {
      handleBannerClick () {
        this.showGallery = true
      },
      handleGalleryClose () {
        this.showGallery = false
      }
    },
    components: {
      Gallery,
      Fade
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .banner
    position relative
    overflow: hidden
    height: 0
    padding-bottom 55%
    .banner-img
      width: 100%
    .banner-info
      padding 0 .15rem .1rem
      position absolute
      bottom 0
      left 0
      right 0
      display flex
      justify-content space-between
      color #fff
      font-size .32rem
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .num
        padding 0 .3rem
        line-height: .32rem
        height: .32rem
        background rgba(0, 0, 0, .8)
        border-radius .2rem
</style>
